<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
		<script src="../static/js/echarts-wordcloud.min.js"></script>
		<!-- <script src="../static/js/echarts.min.js"></script> -->
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<style type="text/css">
			html,
			body{
				height: 100%;
				
			}
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;
			}
			
			li{
				list-style: none;
			}
			
			/* 设置滚动条样式, 宽度0 */
			::-webkit-scrollbar{
				width: 0px;
			}
			
			.w{
				width: 100%;
				height: 3100px;
				text-align: center;
				/* background-color: pink; */
			}
			
			.main{
				width: 100%;
				height: auto;
				/* background-color: #FFFFFF; */
			}
			/* ================================================初始化 */
			
			
			/* ====================================================================第一个大盒子 */
			.first{
				width: 100%;
				height: 540px;
				margin-bottom: 30px;
				background-color: #FFFFFF;
			}
			
			.all_title{
				width: 100%;
				height: 80px;
				padding-left: 30px;
				text-align: left;
				box-sizing: border-box;
				border: 2px rgb(201,201,201) solid;
				border-bottom: none;
				/* color: rgb(130,130,130); */
				font-family: "宋体";
				font-size: 40px;
				line-height: 80px;
			}
			
			.first_title{
				width: 100%;
				height: 40px;
				padding-left: 30px;
				text-align: left;
				box-sizing: border-box;
				border: 2px rgb(201,201,201) solid;
				background-color: rgb(228,235,241);
				color: rgb(75,119,153);
				font-family: "宋体";
				font-size: 20px;
				line-height: 40px;
			}
			
			.first_content{
				position: relative;
				width: 100%;
				height: 420px;
				box-sizing: border-box;
				border: 2px rgb(201,201,201) solid;
				border-top: none;
				padding-left: 30px;
				/* background-color: #00A4FF; */
			}
			
			
			/* ================================左侧舆情总览 */
			.first_content_left{
				display: inline-block;
				float: left;
				width: 20%;
				height: 100%;
				/* background-color: gold; */
				box-sizing: border-box;
				border-right: 3px rgb(235,235,235) solid;
			}
			
			.first_content_left_title{
				width: 100%;
				height: 40px;
				margin-top: 20px;
				/* background-color: #008000; */
				font-size: 30px;
				text-align: center;
				line-height: 40px;
			}
			
			.neirong{
				display: inline-block;
				width: 200px;
				height: 330px;
				margin-top: 10px;
				/* background-color: greenyellow; */
			}
			
			.neirong li{
				width: 200px;
				height: 35px;
				margin-top: 10px;
				margin-bottom: 18px;
				background-color: rgb(235,235,235);
				border: 1px rgb(201,201,201) solid;
				border-radius: 4px;
				line-height: 30px;
			}
			
			.div_six_1{
				display: inline-block;
				float: left;
				width: 60px;
				height: 35px;
				background-color:#6B45BC;
				line-height: 35px;
				font-size: 17px;
				color: #FFFFFF;
				border-radius: 4px;
			}
			
			.div_six_span_1{
				float: left;
				display: inline-block;
				width: 140px;
				height: 35px;
				font-size: 16px;
				line-height: 35px;
				text-align: center;
				/* background-color: #000000; */
				color: gray;
				
			}
			
			/* =================================右侧图 */
			.first_content_right{
				display: inline-block;
				float: right;
				width: 80%;
				height: 100%;
				/* background-color: greenyellow; */
			}
			
			.first_content_right_title{
				width: 100%;
				height: 40px;
				/* background-color: #008000; */
				font-size: 30px;
				padding-left: 30px;
				text-align: left;
				line-height: 40px;
			}
			
			#yuqingfenbu_zhixian{
				width: 100%;
				height: 380px;
				/* background-color: #008000; */
			}
			
		
			/* ====================================================================第二个大盒子 */
			
			.second{
				width: 100%;
				height: 840px;
				background-color: #FFFFFF;
				margin-bottom: 30px;
			}
			
			.second_content{
				width: 100%;
				height: 800px;
				box-sizing: border-box;
				border: 2px rgb(201,201,201) solid;
				border-top: none;
				/* background-color: #20FF4D; */
			}
			
			.second_content_top{
				height: 45%;
				width: 100%;
				padding-left: 30px;
				/* background-color: #6B45BC; */
			}
			
			.second_content_top_left{
				padding: 20px 10px 20px 0;
				width: 69%;
				height: 89%;
				float: left;
				/* background-color: gold; */
			}
			
			#wordcloud{
				height: 100%;
				width: 100%;
				float: left;
				/* background-color: #F30B0B; */
			}
			
			.second_content_top_right{
				position: relative;
				width: 30%;
				height: 100%;
				float: right;
				box-sizing: border-box;
				border-left: 3px rgb(235,235,235) solid;
				/* background-color: gold; */
			}
			
			.second_content_top_right_title{
				width: 100%;
				height: 50px;
				font-size: 30px;
				color: red;
				line-height: 60px;
				/* background-color: #008000; */
			}
			
			.reci_top5{
				position: absolute;
				display: inline-block;
				width: 220px;
				height: 300px;
				right: 50%;
				margin-right: -110px;
				margin-top: 10px;
				/* background-color: greenyellow; */
			}
			
			.reci_top5 li{
				width: 220px;
				height: 35px;
				margin-top: 10px;
				margin-bottom: 18px;
				background-color: rgb(235,235,235);
				border: 1px rgb(201,201,201) solid;
				border-radius: 4px;
				line-height: 30px;
			}
			
			.div_six{
				display: inline-block;
				float: left;
				width: 100px;
				height: 35px;
				background-color:#6B45BC;
				line-height: 35px;
				font-size: 17px;
				color: #FFFFFF;
				border-radius: 4px;
			}
			
			.div_six_span{
				float: left;
				display: inline-block;
				width: 100px;
				height: 35px;
				font-size: 16px;
				line-height: 35px;
				text-align: center;
				/* background-color: #000000; */
				color: gray;
				
			}
			
			
			.second_content_bottom{
				position: relative;
				height: 55%;
				width: 100%;
				box-sizing: border-box;
				border-top: 3px rgb(235,235,235) solid;
				padding-left: 30px;
				/* background-color: gold; */
			}
			
			.second_content_bottom_title{
				position: absolute;
				display: inline-block;
				left: 30px;
				width: 50px;
				height: 100%;
				/* background-color: greenyellow; */
				font-size: 30px;
			}
			
			#reci_bar{
				height: 100%;
				width: 1370px;
				/* background-color: #99FFCC; */
			}
			
			/* ======================================================================第三个盒子 */
			.third{
				width: 100%;
				height: 600px;
				background-color: #FFFFFF;
				margin-bottom: 30px;
			}
			
			.third_content{
				width: 100%;
				height: 560px;
				box-sizing: border-box;
				border: 2px rgb(201,201,201) solid;
				border-top: none;
				/* background-color: #20FF4D; */
			}
			
			.third_content_left{
				display: inline-block;
				float: left;
				width: 52%;
				height: 100%;
				box-sizing: border-box;
				border-right: 3px rgb(235,235,235) solid;
				/* background-color: #00A4FF; */
			}
			
			.third_content_left_top{
				position: relative;
				width: 100%;
				height: 40%;
				box-sizing: border-box;
				border-bottom: 3px rgb(235,235,235) solid;
				/* background-color: gold; */
			}
			
			.location{
				position: absolute;
				display: inline-block;
				width: 600px;
				height: 100%;
				right: 50%;
				margin-right: -300px;
				/* background-color: greenyellow; */
			}
			
			.location li{
				float: left;
				width: 220px;
				height: 35px;
				margin: 5px 60px 15px 0;
				background-color: rgb(235,235,235);
				border: 1px rgb(201,201,201) solid;
				border-radius: 4px;
				line-height: 30px;
			}
			
			
			.third_content_left_bottom{
				position: relative;
				width: 100%;
				height: 60%;
				/* background-color: gold; */
			}
			
			.third_content_left_bottom_title{
				position: absolute;
				display: inline-block;
				width: 40px;
				height: 100%;
				left: 30px;
				/* background-color: #008000; */
				font-size: 25px;
			}
			
			#jieshoulian_pie{
				position: absolute;
				display: inline-block;
				width: 610px;
				height: 100%;
				right: 40px;
				/* background-color: #54C1FD; */
			}
			
			
			
			.third_content_right{
				display: inline-block;
				float: right;
				width: 48%;
				height: 100%;
				/* background-color: goldenrod; */
			}
			
			.third_content_right_title{
				display: inline-block;
				float: left;
				width: 50px;
				height: 100%;
				/* background-color: #008000; */
				font-size: 30px;
			}
			
			.third_content_right_map{
				display: inline-block;
				float: right;
				width: 620px;
				height: 100%;
				/* background-color: #00EEAA; */
				font-size: 30px;
			}
			
			#map{
				width: 100%;
				height: 100%;
				
			}
			
			/* ==============================================================第四个盒子 */
			.fourth{
				width: 100%;
				height: 1000px;
				background-color: #FFFFFF;
				margin-bottom: 30px;
			}
			
			.fourth_content{
				width: 100%;
				height: 960px;
				box-sizing: border-box;
				border: 2px rgb(201,201,201) solid;
				border-top: none;
				/* background-color: #20FF4D; */
			}
			
			.fourth_content_top{
				position: relative;
				padding-left: 30px;
				width: 100%;
				height: 330px;
				box-sizing: border-box;
				border-bottom: 3px rgb(235,235,235) solid;
				/* background-color: gold; */
			}
			
			.fourth_content_top_left{
				position: absolute;
				left: 30px;
				display: inline-block;
				width: 50%;
				height: 100%;
				box-sizing: border-box;
				border-right: 3px rgb(235,235,235) solid;
				/* background-color: #3456FF; */
			}
			
			.fourth_content_top_left_title{
				display: inline-block;
				float: left;
				width: 120px;
				height: 100%;
				/* background-color: #008000; */
				font-size: 20px;
				line-height: 300px;
			}
			
			#niandujieshouzonghe{
				display: inline-block;
				float: right;
				width: 520px;
				height: 100%;
				margin-right: 20px;
				/* background-color: #008000; */
				font-size: 20px;
				line-height: 300px;
			}
			
			.fourth_content_top_right{
				position: absolute;
				right:0;
				display: inline-block;
				width: 47%;
				height: 100%;
				/* background-color: #3456FF; */
			}
			
			.fourth_content_top_right_title{
				display: inline-block;
				float: left;
				margin-left: 10px;
				width: 120px;
				height: 100%;
				/* background-color: #008000; */
				font-size: 20px;
				line-height: 300px;
			}
			
			#yuedufenbu_rader{
				display: inline-block;
				float: right;
				width: 520px;
				height: 100%;
				/* background-color: #008000; */
				font-size: 20px;
				line-height: 300px;
			}
			
			
			
			
			
			.fourth_content_bottom{
				position: relative;
				padding-left: 30px;
				width: 100%;
				height: 330px;
				box-sizing: border-box;
				border-bottom: 3px rgb(235,235,235) solid;
				/* background-color: gold; */
			}
			
			.fourth_content_bottom_left{
				position: absolute;
				left: 30px;
				display: inline-block;
				width: 60%;
				height: 100%;
				box-sizing: border-box;
				border-right: 3px rgb(235,235,235) solid;
				/* background-color: #3456FF; */
			}
			
			.fourth_content_bottom_left_title{
				display: inline-block;
				float: left;
				width: 120px;
				height: 100%;
				/* background-color: #008000; */
				font-size: 20px;
				line-height: 300px;
			}
			
			#fankuifangfa{
				display: inline-block;
				float: right;
				width: 680px;
				height: 100%;
				/* background-color: gold; */
			}
			
			
			.fourth_content_bottom_right{
				position: absolute;
				right: 0px;
				display: inline-block;
				width: 40%;
				height: 100%;
				/* background-color: #3456FF; */
			}
			
			.fourth_content_bottom_right_title{
				display: inline-block;
				float: left;
				margin-left: 30px;
				width: 120px;
				height: 100%;
				/* background-color: #008000; */
				font-size: 20px;
				line-height: 300px;
			}
			
			.fourth_content_bottom_right_content{
				position: relative;
				display: inline-block;
				float: right;
				width: 400px;
				height: 100%;
				/* background-color: pink; */
				line-height: 300px;
			}
			
			.fourth_content_bottom_right_content ul{
				position: absolute;
				left: 50%;
				margin-left: -150px;
				top:50%;
				margin-top: -100px;
				width: 300px;
				height: 200px;
				/* background-color: #00A4FF; */
				text-align: center;
			}
			
			
			.fourth_content_bottom_right_content li{
				width: 280px;
				height: 40px;
				margin-bottom: 40px;
				background-color: rgb(235,235,235);
				border: 1px rgb(201,201,201) solid;
				border-radius: 4px;
				line-height: 40px;
			}
			
			.div_3{
				display: inline-block;
				float: left;
				width: 150px;
				height: 40px;
				background-color:#6B45BC;
				font-size: 17px;
				color: #FFFFFF;
				border-radius: 4px;
			}
			
			.div_3_span{
				float: left;
				display: inline-block;
				width: 120px;
				height: 40px;
				font-size: 18px;
				text-align: center;
				/* background-color: #000000; */
				color: gray;
				
			}
			
			.fourth_content_last_bar{
				padding-left: 30px;
				width: 100%;
				height: 300px;
				/* background-color: gold; */
			}
			
			.fourth_content_last_bar_title{
				float: left;
				width: 130px;
				height: 300px;
				line-height: 300px;
				font-size: 20px;
				/* background-color: #00A4FF; */
			}
			
			.fourth_content_last_bar_chart{
				float: left;
				width: 1250px;
				height: 100%;
				/* background-color: #00A4FF; */
			}
			
			#shoulishijian_bar{
				width: 1250px;
				height: 100%;
				/* background-color: #20FF4D; */
				
			}
			
		</style>
		
		<script type="text/javascript">
			$(function(){
				
				$.get("yuqingzonglan.json",function(data){
					$("#jianyi_1").text("").append(data.zongfenxi[1].yuqingshuju[5].jianyi);
					$("#zixun_1").text("").append(data.zongfenxi[1].yuqingshuju[0].zixun);
					$("#qita_1").text("").append(data.zongfenxi[1].yuqingshuju[1].qita);
					$("#tousu_1").text("").append(data.zongfenxi[1].yuqingshuju[2].tousu);
					$("#qiuzhu_1").text("").append(data.zongfenxi[1].yuqingshuju[3].qiuzhu);
					$("#jubao_1").text("").append(data.zongfenxi[1].yuqingshuju[4].jubao);
					
					
					// window.alert(data.zongfenxi[3].yuqiing_reci[0].value);
					$("#reci_1").text("").append(data.zongfenxi[3].yuqiing_reci[0].name);
					$("#reci_num_1").text("").append(data.zongfenxi[3].yuqiing_reci[0].value);
					$("#reci_2").text("").append(data.zongfenxi[3].yuqiing_reci[1].name);
					$("#reci_num_2").text("").append(data.zongfenxi[3].yuqiing_reci[1].value);
					$("#reci_3").text("").append(data.zongfenxi[3].yuqiing_reci[2].name);
					$("#reci_num_3").text("").append(data.zongfenxi[3].yuqiing_reci[2].value);
					$("#reci_4").text("").append(data.zongfenxi[3].yuqiing_reci[3].name);
					$("#reci_num_4").text("").append(data.zongfenxi[3].yuqiing_reci[3].value);
					$("#reci_5").text("").append(data.zongfenxi[3].yuqiing_reci[4].name);
					$("#reci_num_5").text("").append(data.zongfenxi[3].yuqiing_reci[4].value);
					
					
					$("#num_1").text("").append(data.zongfenxi[4].diquxinxi[0].value);
					$("#num_2").text("").append(data.zongfenxi[4].diquxinxi[2].value);
					$("#num_3").text("").append(data.zongfenxi[4].diquxinxi[3].value);
					$("#num_4").text("").append(data.zongfenxi[4].diquxinxi[6].value);
					$("#num_5").text("").append(data.zongfenxi[4].diquxinxi[4].value);
					$("#num_6").text("").append(data.zongfenxi[4].diquxinxi[1].value);
					$("#num_7").text("").append(data.zongfenxi[4].diquxinxi[5].value);
					
					
					$("#zuichang").text("").append(data.zongfenxi[0].chulishijian[0].chulitianshu[1].zuidatianshu);
					$("#zuiduan").text("").append(data.zongfenxi[0].chulishijian[0].chulitianshu[2].zuixiaotianshu);
					$("#pinjun").text("").append(data.zongfenxi[0].chulishijian[0].chulitianshu[0].pinjuntianshu);
					
					
					
					
					
					
					var yuqingfenbu = echarts.init(document.getElementById("yuqingfenbu_zhixian"));
						yuqingfenbu.setOption({
							legend: {
								top:20
							},
							axisPointer:{
								type:"line"
							},
							tooltip: {
								trigger: 'item',
								formatter: '{a}<br/>{b} 年<br/>{c}（条）',
								// showDelay:200,
								// hideDelay:500
								boderColor:'blue'
							},
							toolbox: {
								show: true,
								// orient: 'vertical',
								right:10,
								top: 20,
								feature: {
								mark: {show: true},
								dataView: {show: true, readOnly: false},
								// restore: {show: true},
								// magicType: {type: ['line', 'bar']},
								saveAsImage: {show: true}
								}
							},
								xAxis: {
									type: 'category',
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[0].xAxis
								},
								yAxis: {
									type: 'value'
								},
								series: [{
									series:"我要建议",
									color:"rgb(252,132,82)",
									name:"我要建议",
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[1].series[3].data,
									type: 'line',
									smooth: true
								},{
									color:"rgb(145,204,117)",
									series:"我要咨询",
									name:"我要咨询",
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[1].series[2].data,
									type: 'line',
									smooth: true
								},{
									color:"rgb(115,192,222)",
									series:"我要投诉",
									name:"我要投诉",
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[1].series[4].data,
									type: 'line',
									smooth: true
								},{
									color:"rgb(238,102,102)",
									series:"我要求助",
									name:"我要求助",
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[1].series[5].data,
									type: 'line',
									smooth: true
								},{
									series:"我要举报",
									color:"rgb(250,200,88)",
									name:"我要举报",
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[1].series[1].data,
									type: 'line',
									smooth: true
								},{
									series:"其他",
									color:"rgb(92,123,217)",
									name:"其他",
									data: data.zongfenxi[2].yuqingshuliang_zhexiantu[1].series[0].data,
									type: 'line',
									smooth: true
								}
								
								]
							}
						);
						
						
					var jieshoulian = echarts.init(document.getElementById("jieshoulian_pie"));
						jieshoulian.setOption({
										// legend: {
										// 	top: 'bottom'
										// },
										
										tooltip: {
										    formatter: '{b}<br/>共：{c}（条）',
										},
										toolbox: {
											show: true,
											feature: {
												mark: {show: true},
												dataView: {show: true, readOnly: false},
												// restore: {show: true},
												saveAsImage: {show: true}
											}
										},
										series: [
											{
												color:['rgb(92,123,217)','rgb(145,204,117)','rgb(250,200,88)','rgb(238,102,102)','rgb(115,192,222)','rgb(59,162,114)','rgb(252,132,82)','rgb(154,96,180)','rgb(234,124,204)','rgb(84,112,198)'],
												type: 'pie',
												top:25,
												radius: [30, 120],
												center: ['50%', '50%'],
												roseType: 'area',
												itemStyle: {
													borderRadius: 8
												},
												data: data.zongfenxi[4].diquxinxi
											}
										]
									}
							
							);
							
							
					var fankuifangfa = echarts.init(document.getElementById("fankuifangfa"));
						fankuifangfa.setOption({
											// legend: {
											// 	top: 'bottom'
											// },
											
											tooltip: {
											    formatter: '{b}<br/>共：{c}（条）',
											},
											toolbox: {
												show: true,
												feature: {
													mark: {show: true},
													dataView: {show: true, readOnly: false},
													// restore: {show: true},
													saveAsImage: {show: true}
												}
											},
											series: [
												{
													color:['rgb(92,123,217)','rgb(145,204,117)','rgb(250,200,88)','rgb(238,102,102)','rgb(115,192,222)','rgb(59,162,114)','rgb(252,132,82)','rgb(154,96,180)','rgb(234,124,204)','rgb(84,112,198)'],
													type: 'pie',
													top:25,
													radius: [30, 130],
													center: ['45%', '50%'],
													roseType: 'area',
													itemStyle: {
														borderRadius: 8
													},
													data: data.zongfenxi[5].yuqing_jieshou
												}
											]
										}
								
							);
					
					var shoulishijian = echarts.init(document.getElementById("shoulishijian_bar"));
						shoulishijian.setOption({
							legend: {
								top:20
							},
							axisPointer:{
								type:"line"
							},
							tooltip: {
								trigger: 'axis',
								formatter: '处理用时：<br/>{b}<br/>{c}（篇）',
								// showDelay:200,
								// hideDelay:500
								boderColor:'blue'
							},
							toolbox: {
								show: true,
								// orient: 'vertical',
								right:20,
								top: 20,
								feature: {
								mark: {show: true},
								dataView: {show: true, readOnly: false},
								// restore: {show: true},
								// magicType: {type: ['line', 'bar']},
								saveAsImage: {show: true}
								}
							},
								xAxis: {
									type: 'category',
									data: data.zongfenxi[0].chulishijian[1].time_zhuxingtu[0].xAxis.data,
								},
								yAxis: {
									type: 'value'
								},
								series: [{
									color:"rgb(252,132,82)",
									data: data.zongfenxi[0].chulishijian[1].time_zhuxingtu[1].series[0].data,
									type: 'line',
									smooth: true
								},{
									color:"rgb(145,204,117)",
									data: data.zongfenxi[0].chulishijian[1].time_zhuxingtu[1].series[0].data,
									type: 'bar',
								}
								
								]
							}
						);
					
					
					
				},"json");
				
				
				
				
				var wordcloud_chart = echarts.init(document.getElementById('wordcloud'));
					wordcloud_chart.showLoading({
					text:'Loading',
					maskColor:'rgba(0,0,0,0)',
					color:'rgb(73,163,254)',
					textColor:'rgb(73,163,254)',
					lineWidth: 5,
					fontSize: 16,
					spinnerRadius: 15,
				});
				 $.get('wordcloud.json', function(data){
					 wordcloud_chart.hideLoading();
					 wordcloud_chart.setOption(
					 {
							tooltip: {},
							series: [ {
									 type: 'wordCloud',
									 gridSize: 2,
									 //字体大小范围
									 sizeRange: [10, 80],
									 //字体旋转角度范围
									 rotationRange: [-90, 90],
									 //词云图形状
									 shape: 'cicle',
									 left: 'center',
									 top: 'center',
									 right: null,
									 bottom: null,
				
									 //词云图长宽
									 width: '100%',
									 height: '100%',
									 // 是否画超出范围的词
									 // drawOutOfBound: true,
									 textStyle: {
										 //字体随机颜色
										 normal: {
											 color: function () {
												 return 'rgb(' + [
													 Math.round(Math.random() * 200),
													 Math.round(Math.random() * 150),
													 Math.round(Math.random() * 200)
												 ].join(',') + ')';
											 }
										 },
										 emphasis: {
											 //阴影距离
											 shadowBlur: 8,
											 //阴影颜色
											 shadowColor: '#333'
										 }
									 },
									 data: data.datas
							} ]
					 })
				 },'json')
				
				
				
				
				var reci_barChart = echarts.init(document.getElementById('reci_bar'));
				reci_barChart.showLoading({
						text:'Loading',
						maskColor:'rgba(0,0,0,0)',
						color:'rgb(73,163,254)',
						textColor:'rgb(73,163,254)',
						lineWidth: 5,
						fontSize: 16,
						spinnerRadius: 15,
					});
				$.get('reci_bar.json',function(data){
					reci_barChart.hideLoading();  // 隐藏 loading 效果
					reci_barChart.setOption({
						color:['rgb(92,123,217)','rgb(145,204,117)','rgb(250,200,88)','rgb(238,102,102)','rgb(115,192,222)','rgb(59,162,114)','rgb(252,132,82)','rgb(154,96,180)','rgb(234,124,204)','rgb(84,112,198)'],
						grid:{
							   x:120,
							   y:70,
							   x2:70,
							   y2:80
							  },
						legend: {
							top:20
						},
						toolbox: {
							top:20,
							right:10,
							show: true,
							feature: {
								mark: {show: true},
								// dataView: {show: true, readOnly: false},
								// restore: {show: true},
								// magicType: {type: ['line', 'bar']},
								saveAsImage: {show: true}
							}
						},
						dataset: data.datas,
						xAxis: {type: 'category'},
						yAxis: {
				
						},
						dataZoom:[
							{
								type:'inside',
								// start:50,
								// end:80
							},
							{
								type:'slider',
								// start:50,
								// end:80,
								// yAxisIndex:0
							},
							{
								type:'slider',
								// start:50,
								// end:80,
								yAxisIndex:0
							}
						],
						// Declare several bar series, each will be mapped
						// to a column of dataset.source by default.
						series: [
							{type: 'bar'},
							{type: 'bar'},
							{type: 'bar'},
							{type: 'bar'},
							{type: 'bar'},
							{type: 'bar'},
							{type: 'bar'},
						]
					});
				},'json');
				
				
				
				
				$.get('wuhuData.json',function(data){
					mapData = data.datas;
					
					$.get('wuhuMap.json', function (wuhuMapJson) {
						echarts.registerMap('芜湖市', wuhuMapJson); // 注册地图
						var wuhuMap = echarts.init(document.getElementById('map')); //初始化地图
						var option_map = {
							title: {
								// text: '芜湖市各区接受量',
								x:'left',
								y:20,
								textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
					                fontFamily: 'Arial',
					                fontSize: 30,
					                fontStyle: 'normal',
					                fontWeight: 'bolder',
									color:'rgb(73,163,254)',
					            },
							},
							tooltip: {
								trigger: 'item',
								formatter: '{b}<br/>{c}（条）',
								// showDelay:200,
								// hideDelay:500
								boderColor:'blue'
							},
							toolbox: {
								show: true,
								// orient: 'vertical',
								right:10,
								top: 20,
								feature: {
									dataView: {readOnly: false},
									restore: {},
									saveAsImage: {}
								}
							},
							visualMap: {
								type: 'continuous', // 连续型
								min: 3000,
								max: 16000,
								bottom:30,
								text: ['Max', 'Min'],
								calculable: true,// 是否启用值域漫游
								inRange: {
									color: ['lightskyblue', 'yellow', 'red']
								},
							   textStyle: {
									color: 'rgb(73,163,254)'	// 值域控件的文本颜色
								}
							},
							geo: {
								map: '芜湖市',
								itemStyle: {
										borderWidth: 8,//设置外层边框
										borderColor:'rgb(73,163,254)',
										shadowColor: 'rgb(73,163,254)',
										shadowBlur: 5,
										shadowOffsetX:5,
										shadowOffsetY:5,
									},
					
							},
							series: [
								{
									name: '芜湖市', // series名称
									type: 'map',
									mapType: '芜湖市', // 自定义扩展图表类型
									itemStyle: {
											borderWidth: 2,
											borderColor:'rgba(0,0,0,0)',
											shadowColor: 'rgb(73,169,204)',
											shadowBlur: 1,
											shadowOffsetX:-8,
											shadowOffsetY:8,
										},
					
									label: {
										show: true   ,// 显示地名
									},
					
									data: mapData // series数据内容
								}
							],
						};
						wuhuMap.setOption(option_map);
					
					});
					
				},'json');
				
				
				
				
				var niandujieshouzonghe = echarts.init(document.getElementById('niandujieshouzonghe'));
					niandujieshouzonghe.showLoading({
						text:'Loading',
						maskColor:'rgba(0,0,0,0)',
						color:'rgb(73,163,254)',
						textColor:'rgb(73,163,254)',
						lineWidth: 5,
						fontSize: 16,
						spinnerRadius: 15,
					});
				$.get('niandujieshou.json', function (data) {
							niandujieshouzonghe.hideLoading();  // 隐藏 loading 效果
							niandujieshouzonghe.setOption({
							legend: {
								top:20
							},
							axisPointer:{
								type:"line"
							},
							tooltip: {
								trigger: 'axis',
								formatter: '<br/>{b} 年<br/>{c}（条）',
								// showDelay:200,
								// hideDelay:500
								boderColor:'blue'
							},
							toolbox: {
								show: true,
								// orient: 'vertical',
								right:10,
								top: 20,
								feature: {
								mark: {show: true},
								dataView: {show: true, readOnly: false},
								// restore: {show: true},
								// magicType: {type: ['line', 'bar']},
								saveAsImage: {show: true}
								}
							},
								xAxis: {
									type: 'category',
									data: data.datas[1]
								},
								yAxis: {
									type: 'value'
								},
								series: [{
									color:"rgb(252,132,82)",
									data: data.datas[2],
									type: 'line',
									smooth: true
								},
								{
									barWidth:25,
									color:"rgb(145,204,117)",
									data: data.datas[2],
									type: 'bar',
								}
								
								]
							})
				        }, 'json');
				
				
				
				
				var raderChart = echarts.init(document.getElementById('yuedufenbu_rader'));
				raderChart.showLoading({
						text:'Loading',
						maskColor:'rgba(0,0,0,0)',
						color:'rgb(73,163,254)',
						textColor:'rgb(73,163,254)',
						lineWidth: 5,
						fontSize: 16,
						spinnerRadius: 15,
					});
				$.get('rader.json',function(data){
					raderChart.hideLoading();  // 隐藏 loading 效果
					raderChart.setOption({
						color:['rgb(92,123,217)','rgb(145,204,117)','rgb(250,200,88)','rgb(238,102,102)','rgb(115,192,222)','rgb(59,162,114)','rgb(252,132,82)','rgb(154,96,180)','rgb(234,124,204)','rgb(84,112,198)'],
					    title: {
					        // text: '反馈热度时期\n雷达图',
							left: '10px',
							top: '10px',
							textStyle: {
					                fontFamily: 'Arial',
					                fontSize: 30,
					                fontStyle: 'normal',
					                fontWeight: 'bolder',
									color:'rgb(73,163,254)',
							    },
				
					    },
					    tooltip: {},
					    legend: {
					        data: data.datas.legend,
							right: '10px',
							top: '20px',
							padding:[50,10,0,500],
					    },
						toolbox: {
							show: true,
							top: '10px',
							right: '10px',
							feature: {
								mark: {show: true},
								// dataView: {show: true, readOnly: false},
								// restore: {show: true},
								saveAsImage: {show: true}
							}
						},
					    radar: {
					        // shape: 'circle',
					        name: {
					            textStyle: {
					                color: '#fff',
					                backgroundColor: '#999',
					                borderRadius: 3,
					                padding: [3, 5]
					            }
					        },
					        indicator: [
				        { "name": "一月", "max": 100},
						{ "name": "二月", "max": 100},
						{ "name": "三月", "max": 120},
						{ "name": "四月", "max": 100},
						{ "name": "五月", "max": 100},
						{ "name": "六月", "max": 100},
						{ "name": "七月", "max": 120},
				        { "name": "八月", "max": 100},
				        { "name": "九月", "max": 100},
				        { "name": "十月", "max": 100},
				        { "name": "十一月", "max": 100},
				        { "name": "十二月", "max": 100}
				    ],
					    },
					    series: [{
					        type: 'radar',
					        // areaStyle: {normal: {}},
					        data: data.datas.data,
					    }]
					}
					);
				
				},'json');
				
				



			
			

			});
		</script>
	</head>
	<body>
		<div class="w">
			<div class="main">
				<div class="first">
					
					<div class="all_title">
						舆情总览
					</div>
					
					<div class="first_title">
						舆情反馈数量分析
					</div>
					<div class="first_content">
						<div class="first_content_left">
							<div class="first_content_left_title">
								舆情数据
							</div>
							
							<ul class="neirong">
								<li>
									<div class="div_six_1" style="background-color: rgb(107,69,188);">建议</div>
									<span id="jianyi_1" class="div_six_span_1"></span>
								</li>
								<li>
									<div class="div_six_1" style="background-color: rgb(222,184,135);">咨询</div>
									<span id="zixun_1" class="div_six_span_1"></span>
								</li>
								<li>
									<div class="div_six_1" style="background-color: rgb(255,0,0);">投诉</div>
									<span id="tousu_1" class="div_six_span_1"></span>
								</li>
								<li>
									<div class="div_six_1" style="background-color: rgb(115,239,103);">求助</div>
									<span id="qiuzhu_1" class="div_six_span_1"></span>
								</li>
								<li>
									<div class="div_six_1" style="background-color: rgb(205,133,63);">举报</div>
									<span id="jubao_1" class="div_six_span_1"></span>
								</li>
								<li>
									<div class="div_six_1" style="background-color: rgb(255,140,0);">其他</div>
									<span id="qita_1" class="div_six_span_1"></span>
								</li>
							</ul>
						</div>
						
						<div class="first_content_right">
							<div class="first_content_right_title">
								问题数量-年份分布
							</div>
							<div id="yuqingfenbu_zhixian">
								
							</div>
						</div>
					</div>
				</div>
				
				<div class="second">
					<div class="first_title">
						舆情热词分析
					</div>
					<div class="second_content">
						<div class="second_content_top">
							<div class="second_content_top_left">
								<div id="wordcloud"></div>
							</div>
							<div class="second_content_top_right">
								<div class="second_content_top_right_title">
									热词TOP5
								</div>
								
								<ul class="reci_top5">
									<li>
										<div id="reci_1" class="div_six" style="background-color: rgb(107,69,188);"></div>
										<span id="reci_num_1" class="div_six_span"></span>
									</li>
									<li>
										<div id="reci_2" class="div_six" style="background-color: rgb(222,184,135);"></div>
										<span id="reci_num_2" class="div_six_span"></span>
									</li>
									<li>
										<div id="reci_3" class="div_six" style="background-color: rgb(255,0,0);"></div>
										<span id="reci_num_3" class="div_six_span"></span>
									</li>
									<li>
										<div id="reci_4" class="div_six" style="background-color: rgb(115,239,103);"></div>
										<span id="reci_num_4" class="div_six_span"></span>
									</li>
									<li>
										<div id="reci_5" class="div_six" style="background-color: rgb(205,133,63);"></div>
										<span id="reci_num_5" class="div_six_span"></span>
									</li>
								</ul>
							</div>
						</div>
						<div class="second_content_bottom">
							<div class="second_content_bottom_title">
								&emsp;热词年份追踪柱形图
							</div>
							<div id="reci_bar"></div>
						</div>
					</div>
				</div>
			
				<div class="third">
					<div class="first_title">
						舆情地区分布
					</div>
					<div class="third_content">
						<div class="third_content_left">
							<div class="third_content_left_top">
								<ul class="location">
									<li>
										<div class="div_six" style="background-color: rgb(107,69,188);">无为市</div>
										<span id="num_1" class="location_span">1332</span>
									</li>
									<li>
										<div class="div_six" style="background-color: rgb(222,184,135);">鸠江区</div>
										<span id="num_2" class="location_span">13002</span>
									</li>
									<li>
										<div class="div_six" style="background-color: rgb(255,0,0);">弋江区</div>
										<span id="num_3" class="location_span">132</span>
									</li>
									<li>
										<div class="div_six" style="background-color: rgb(115,239,103);">镜湖区</div>
										<span id="num_4" class="location_span">132</span>
									</li>
									<li>
										<div class="div_six" style="background-color: rgb(84,193,253);">繁昌区</div>
										<span id="num_5" class="location_span">132</span>
									</li>
									<li>
										<div class="div_six" style="background-color: rgb(255,64,0);">湾沚区</div>
										<span id="num_6" class="location_span">132</span>
									</li>
									<li>
										<div class="div_six" style="background-color: rgb(205,133,63);">南陵县</div>
										<span id="num_7" class="location_span">132</span>
									</li>
								</ul>
							</div>
							
							<div class="third_content_left_bottom">
								<div class="third_content_left_bottom_title">
									&emsp;地区接收量占比
								</div>
								
								<div id="jieshoulian_pie">
									
								</div>
							</div>
						</div>
						
						<div class="third_content_right">
							<div class="third_content_right_title">
								&emsp;区县接收总量地区分布
							</div>
							<div class="third_content_right_map">
								<div id="map"></div>
							</div>
						</div>
					</div>
				</div>
			
				<div class="fourth">
					<div class="first_title">
						舆情反馈方法及时期分析
					</div>
					<div class="fourth_content">
						<div class="fourth_content_top">
							<div class="fourth_content_top_left">
								<div class="fourth_content_top_left_title">
									年度接收总和
								</div>
								
								<div id="niandujieshouzonghe"></div>
							</div>
							
							<div class="fourth_content_top_right">
								<div class="fourth_content_top_right_title">
									舆情月度分布
								</div>
								
								<div id="yuedufenbu_rader"></div>
							</div>
						</div>
						
						<div class="fourth_content_bottom">
							<div class="fourth_content_bottom_left">
								<div class="fourth_content_bottom_left_title">
									舆情接收途径
								</div>
								
								<div id="fankuifangfa"></div>
							</div>
							
							<div class="fourth_content_bottom_right">
								<div class="fourth_content_bottom_right_title">
									处理时间
								</div>
								
								<div class="fourth_content_bottom_right_content">
									<ul>
										<li>
											<div class="div_3" style="background-color: rgb(145,204,117);">
												最短处理用时
											</div>
											<span class="div_3_span" id="zuiduan">
												
											</span>
										</li>
										<li>
											<div class="div_3" style="background-color: red;">
												最长处理用时
											</div>
											<span class="div_3_span" id="zuichang" style="color: red;font-weight: 700;">
												
											</span>
										</li>
										<li>
											<div class="div_3" style="background-color: orange;">
												平均处理用时
											</div>
											<span class="div_3_span" id="pinjun">
												
											</span>
										</li>
									</ul>
								</div>
								
							</div>
						</div>
						
						<div class="fourth_content_last_bar">
							<div class="fourth_content_last_bar_title">
								受理时间分布
							</div>
							<div class="fourth_content_last_bar_chart">
								<div id="shoulishijian_bar">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
